<template>
  <div class="app-container">
    <div class="qrCodeContainer" style="width: 450px; height: 50px; display: none; width: 100%">
      <h1 class="title" style="width: 480px; margin-left: 27%">{{ $t(`Print.RongyangGarmentCoLtdPreLoadingOperation`) }}</h1>
      <div style="width: 95%; margin: auto" v-for="(item, index) in slipNoList1" :key="index">
        <div style="display: flex; width: 100%; font-size: 13px; justify-content: space-between">
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.ThePickingOrderNumber`) }}:{{ index }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.RequisitionDate`) }}:{{ userInfo?.lastLogin.split(' ')[0] }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.Department`) }}:{{ userInfo?.deptName }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.DateOfPrinting`) }}:{{ formatCurrentDateTime(currentDate) }}</h2>
        </div>

        <div style="width: 100%">
          <table style="width: 100%; font-size: 13px">
            <thead>
              <tr>
                <th>{{ $t(`Print.Directives`) }}</th>
                <!-- <th>领料单号</th> -->
                <th>{{ $t(`Print.Body`) }}</th>
                <th>{{ $t(`Print.OrderVolume`) }}</th>
                <th>{{ $t(`Print.MaterialColorKey`) }}</th>
                <th>{{ $t(`Print.MaterialName`) }}</th>
                <th>{{ $t(`Print.Specification`) }}</th>
                <th>{{ $t(`Print.Unit`) }}</th>
                <th>{{ $t(`Print.Consumption`) }}</th>
                <th>{{ $t(`Print.PleasePickUpTheAmount`) }}</th>
                <th>{{ $t(`Print.Remark`) }}</th>
                <!-- 更多的表头单元格 -->
              </tr>
            </thead>
            <tbody>
              <tr v-for="(iten1, index) in item" :key="index">
                <td>{{ iten1.lotNo }}</td>
                <!-- <td>{{ iten1.slipNo }}</td> -->
                <td>{{ iten1.style }}</td>
                <td>{{ iten1.orderQty }}</td>
                <td>{{ iten1.mtlColor }}</td>
                <td>{{ iten1.mtlName }}</td>
                <td>{{ iten1.mtlUnit }}</td>
                <td>{{ iten1.mtlSpec }}</td>
                <td>{{ iten1.ttlUsage }}</td>
                <td>{{ iten1.reqQty }}</td>
                <td>{{ iten1.remark }}</td>
                <!-- 更多的数据单元格 -->
              </tr>
              <!-- 更多的行 -->
            </tbody>
            <!-- 可选的 tfoot 部分 -->
          </table>
          <div style="display: flex; justify-content: space-between; width: 85%; font-size: 17px; width: 80%; margin: auto">
            <h2 style="font-size: 13px">{{ $t(`Print.HeadOfDepartment`) }}:</h2>
            <h2 style="font-size: 13px">{{ $t(`Print.WarehouseKeeper`) }}:</h2>
            <h2 style="font-size: 13px">{{ $t(`Print.Picker`) }}:{{ userInfo.chiName }}</h2>
          </div>

          <!-- <Table :tableHeader="tableHeader5" :tableData="slipNoList" /> -->
        </div>
      </div>
    </div>

    <Find @Launchform="Launchform5" :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '15px' }">
      <div style="display: flex">
        <div style="width: 50%">
          <h1>{{ $t(`Print.InstructionUsageDetails`) }}</h1>
          <Table
            @selectList="selectList"
            :isLoading="isLoading3"
            @inputChange="checkboxChange2"
            :tableHeader="tableHeader"
            :tableData="InstructionUsageDetailsTableDate"
            :TableHeight="88"
          />
        </div>
        <div style="width: 50%; margin-left: 10px">
          <h1>{{ $t(`Print.PickingDetailFile`) }}</h1>
          <Table
            selection
            @selectList="selectList1"
            :isLoading="isLoading1"
            :tableHeader="tableHeader1"
            :tableData="QueryOfMaterialRequisitionDetailsFileTableDate"
            :TableHeight="88"
          />
          <PageModule
            :PageData="{ buttonS: true, total: totalL }"
            :layout="'prev, pager'"
            @pageChange="pageChangeL"
            @pageSizeChange="pageSizeChangeL"
          />
        </div>
      </div>
      <PageModule :PageData="{ pageSizeShow: true }" />
    </el-card>

    <el-dialog v-model="dialogVisible1" width="80%" class="dialog pb0">
      <Find
        @clickNumber1="clickNumber1"
        :OriginalFilter="{ static: true }"
        :searchImg="false"
        :formList="formList2"
        @Launchform="Launchform"
        @findClicked="findData1"
      />
      <div style="display: flex">
        <div style="width: 80%">
          <h1>{{ $t(`Print.QueryTheUsageOfAnOrder`) }}</h1>
          <Table
            @selectList="selectList2"
            @currentRow="currentRow1"
            selection
            :isLoading="isLoading2"
            :tableHeader="tableHeader2"
            :tableData="SelectMaterialQueryTableDate"
            :TableHeight="88"
          />
          <PageModule :PageData="{ buttonS: true, total }" :layout="'prev, pager'" @pageChange="pageChange" @pageSizeChange="pageSizeChange" />
        </div>
        <div style="margin-left: 15px">
          <h1>{{ $t(`Print.BreakdownOfTheDosageOfThePart`) }}</h1>
          <Table :isLoading="isLoading5" :tableHeader="tableHeader3" :tableData="partNameQueryTableDate" :TableHeight="88" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { MaterialManufacturer } from '@/api/WarehouseDepartment/FactoryStorage/MaterialReturnOperation'
import LoginWork from '@/utils/LoginWork'
import { printList } from '@/api/AccountingDepartment/FactoryProductionOperation/CommandRequisition'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PreRequisitionOfMaterials'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { GainDeptNmae } from '@/api/WarehouseDepartment/FactoryStorage/ConsumablesIn'
import { ref, onMounted } from 'vue'
import {
  partNameQuery,
  BatchProcessingOfMaterialRequisition,
  InstructionUsageDetails,
  QueryOfMaterialRequisitionDetailsFile,
  SelectMaterialQuery,
  ToBeProcessedTnBatchesForMaterialRequisition
} from '@/api/AccountingDepartment/FactoryProductionOperation/PreRequisitionOfMaterials'
// 领料单打印

const printQRCode = () => {
  const qrCodeContainer = document.querySelector<any>('.qrCodeContainer')
  if (qrCodeContainer) {
    // 临时显示 .qrCodeContainer 以获取其内容
    qrCodeContainer.style.display = 'block'

    const printWindow = window.open('', '_blank')
    printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印指令领料作业</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto; 
              margin: 3mm;
            }
            @media print {
                /* 打印时的样式 */
             
                
                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
               

            table, th, td {
                    border: 1px solid black; 
                    border-collapse: collapse; 
                    text-align: center;
                  }
                  th, td {
                    padding: 5px; /* 设置内边距 */
                    text-align: left; /* 设置文本对齐方式 */
                    text-align: center;
                    font-size:11px
                  }
                  .double-line {
                    border-top: 2px dashed red; 
                    border-bottom: 2px dashed red; 
                    text-align: center;
                  }
           
            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

    // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
    const cloneContainer = qrCodeContainer.cloneNode(true)
    printWindow!.document.body.appendChild(cloneContainer)

    printWindow!.document.write(`
        </body>
      </html>
    `)
    printWindow!.document.close()

    // 开始打印
    printWindow!.print()

    // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
    qrCodeContainer.style.display = 'none'
  }
}

const printListMethods = async () => {
  try {
    const result = await printList(slipNoList.value)
    if (result.code === 200) {
      QueryOfMaterialRequisitionDetailsFileMethods()
      printQRCode()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.warning('打印出错请重试')
  }
}

// 领料单号

const slipNoList = ref<any>([])

const slipNoList1 = ref<any>([])

const selectList1 = (row: any) => {
  slipNoList.value = row.map((item: any) => {
    let { slipNo, lotNo, mtlNo, printTime } = item
    return { slipNo, lotNo, mtlNo, printTime }
  })
  slipNoList1.value = row.reduce((acc: any, item: any) => {
    if (!acc[item.slipNo]) {
      acc[item.slipNo] = []
    }
    acc[item.slipNo].push(item)
    return acc
  }, {})
}

// 日期
const formatCurrentDateTime = (date?: Date) => {
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数
  const hours = String(date!.getHours()).padStart(2, '0') // 小时
  const minutes = String(date!.getMinutes()).padStart(2, '0') // 分钟
  const seconds = String(date!.getSeconds()).padStart(2, '0') // 秒

  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const currentDate = ref(new Date())

// 部位用量查询
const partNameQueryParms = ref({
  lotNo: '',
  mtlNo: '',
  slipNo: null
})

const isLoading5 = ref(true)

const partNameQueryTableDate = ref([])

const partNameQueryMethods = async () => {
  try {
    isLoading5.value = true
    const result = await partNameQuery(partNameQueryParms.value)
    partNameQueryTableDate.value = result
    isLoading5.value = false
  } catch (error) {
    isLoading5.value = false
    JMessage.error('查询失败')
  }
}

// 领料批处理
const BatchProcessingOfMaterialRequisitionParms = ref([])

const selectList = (row: any) => {
  BatchProcessingOfMaterialRequisitionParms.value = row.map((item: any) => {
    return item
  })
}

const BatchProcessingOfMaterial = ref({
  deptNo: '',
  deptName: '',
  slipDate: ''
})

const BatchProcessingOfMaterialRequisitionMethods = async () => {
  try {
    const result = await BatchProcessingOfMaterialRequisition(
      InstructionUsageDetailsTableDate.value.map((item: any) => {
        item.slipDate = BatchProcessingOfMaterial.value.slipDate
        item.deptName = BatchProcessingOfMaterial.value.deptName
        item.deptNo = BatchProcessingOfMaterial.value.deptNo
        return item
      })
    )
    if (result.code === 200) {
      InstructionUsageDetailsMethods()
      QueryOfMaterialRequisitionDetailsFileMethods()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.error('领料批处理失败')
  }
}

// 备注修改
const checkboxChange2 = async (list: any) => {
  let { lotNo, mtlNo, remark } = list

  let parms = { lotNo: '', mtlNo: '', slipNo: '', remark: '' }

  parms.lotNo = lotNo
  parms.mtlNo = mtlNo
  parms.slipNo = remark

  const result = await LoginWork.put<any, any>(`/produce/ModifyRemarks/1`, parms)
  if (result.code === 200) {
    InstructionUsageDetailsMethods()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

// 待领料批处理
const ToBeProcessedTnBatchesForMaterialRequisitionParms = ref([])

const selectList2 = (row: any) => {
  ToBeProcessedTnBatchesForMaterialRequisitionParms.value = row.map((item: any) => {
    return item
  })
}

const ToBeProcessedTnBatchesForMaterialRequisitionMethods = async () => {
  try {
    const result = await ToBeProcessedTnBatchesForMaterialRequisition(
      ToBeProcessedTnBatchesForMaterialRequisitionParms.value.map((item: any) => {
        item.supplementNo = item.slipNo
        item.reqQty = item.notActQty
        return item
      })
    )
    if (result.code === 200) {
      SelectMaterialQueryMethods()
      InstructionUsageDetailsMethods()
      ToBeProcessedTnBatchesForMaterialRequisitionParms.value = []
      JMessage.success(result.message)
    }
  } catch (error) {
    JMessage.error('待领料批处理失败')
  }
}

const findData1 = (cout: string) => {
  if (cout === '待领批处理') {
    if (ToBeProcessedTnBatchesForMaterialRequisitionParms.value.length === 0) {
      JMessage.warning('请勾选需要批处理的数据')
    } else {
      ToBeProcessedTnBatchesForMaterialRequisitionMethods()
    }
  }
}

// 分类查询
const MaterialManufacturerVnder = async () => {
  let NewArray = []
  const result = await MaterialManufacturer()

  NewArray = result.slipType.reduce((arr: any, item: any) => {
    if (item.typeName && item.typeNo) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeNo + ' ' + item.typeName)
    }
    return arr
  }, [])
  formList2.value[1].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

const currentRowList = ref([
  {
    ttlUsage: '',
    partName: ''
  }
])

const currentRow1 = (row: any) => {
  partNameQueryParms.value.lotNo = row.lotNo
  partNameQueryParms.value.mtlNo = row.mtlNo
  partNameQueryMethods()
}

// 选择材料查询
const dialogVisible1 = ref(false)

const isLoading2 = ref(true)

const isLoading3 = ref(true)

const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '指令',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '材料名称',
    inputValue: ''
  },
  {
    type: 'radio1',
    checkboxLabel: '未领',
    checked: false,
    label: '1'
  },
  {
    type: 'radio1',
    checkboxLabel: '已领',
    checked: false,
    label: '2'
  },
  {
    type: 'radio1',
    checkboxLabel: '全部',
    checked: true,
    label: '0'
  },
  {
    type: 'button',
    checkboxLabel: '待领批处理'
  },
  {
    type: 'input',
    inputPlaceholder: '请领双数',
    inputValue: ''
  }
])

const Launchform = (row: any) => {
  SelectMaterialQueryParms.value.lotNo = row[0].inputValue
  SelectMaterialQueryParms.value.typeNo = row[1].selectValue.split(' ')[0]
  SelectMaterialQueryParms.value.mtlName = row[2].inputValue
  SelectMaterialQueryMethods()
}

const clickNumber1 = (row: string) => {
  switch (row) {
    case '0': {
      SelectMaterialQueryParms.value.status = null
      break
    }
    case '1': {
      SelectMaterialQueryParms.value.status = 0
      break
    }
    case '2': {
      SelectMaterialQueryParms.value.status = 1
      break
    }
  }
  SelectMaterialQueryMethods()
}

const SelectMaterialQueryParms = ref<any>({
  lotNo: '',
  mtlName: '',
  pageNum: 1,
  pageSize: 40,
  status: null,
  typeNo: ''
})

const total = ref(0)

const pageChange = (val: any) => {
  SelectMaterialQueryParms.value.pageNum = val
  SelectMaterialQueryMethods()
}

const pageSizeChange = (val: any) => {
  SelectMaterialQueryParms.value.pageSize = val
  SelectMaterialQueryMethods()
}

const SelectMaterialQueryTableDate = ref([])

const SelectMaterialQueryMethods = async () => {
  try {
    isLoading2.value = true
    const result = await SelectMaterialQuery(SelectMaterialQueryParms.value)
    SelectMaterialQueryTableDate.value = result.list.map((item: any) => {
      // if (item.status === '0') {
      //   item.backgroundColor = '#FFFF00'
      //   item.change = null
      // }
      if (item.status === '1') {
        item.backgroundColor = '#00ff00'
        item.change = null
      }
      // if( item.stkQty  === 0 || item.stkQty < item.noReqQTY){
      //     item.backgroundColor3 = 'red'
      //     item.change = null
      // }
      return item
    })
    total.value = result.total
    if (result.list.length !== 0) {
      partNameQueryParms.value.lotNo = result.list[0].lotNo
      partNameQueryParms.value.mtlNo = result.list[0].mtlNo
      partNameQueryMethods()
    }
    isLoading2.value = false
  } catch (error) {
    JMessage.error('查询出错')
  }
}

const formList1 = ref([
  {
    type: 'button',
    checkboxLabel: '选择材料'
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '部门',
    selectLabel: '',
    selectOptions: [],
    disabled: true
  },
  {
    type: 'dateSingle',
    dateLabel: '领料日期',
    dateValue: '',
    disabled: true
  },
  {
    type: 'button',
    checkboxLabel: '领料批处理'
  },
  {
    type: 'button',
    checkboxLabel: '打印领料单'
  },

  {
    type: 'input',
    inputPlaceholder: '请输入领料单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '领料日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
  // {
  //   type: 'input',
  //   inputPlaceholder: '',
  //   inputValue: '',
  //   inputLabel: '裁条管宽度(MM)'
  // },
  // {
  //   type: 'button',
  //   checkboxLabel: '裁条Y换算M'
  // }
])

// 领料明细档查询
const QueryOfMaterialRequisitionDetailsFileParms = ref({
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  slipDateEnd: '',
  slipDateStart: '',
  slipNo: ''
})

const Launchform5 = (row: any) => {
  QueryOfMaterialRequisitionDetailsFileParms.value.lotNo = row[6].inputValue
  QueryOfMaterialRequisitionDetailsFileParms.value.slipDateEnd = row[7].dateValue[1]
  QueryOfMaterialRequisitionDetailsFileParms.value.slipDateStart = row[7].dateValue[0]
  QueryOfMaterialRequisitionDetailsFileParms.value.slipNo = row[5].inputValue
  QueryOfMaterialRequisitionDetailsFileMethods()
  BatchProcessingOfMaterial.value.slipDate = formatCurrentDateTime1(currentDate.value)
}

const formatCurrentDateTime1 = (date?: any) => {
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数

  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day} `
}

const totalL = ref(0)

const pageChangeL = (val: any) => {
  QueryOfMaterialRequisitionDetailsFileParms.value.pageNum = val
  QueryOfMaterialRequisitionDetailsFileMethods()
}

const pageSizeChangeL = (val: any) => {
  QueryOfMaterialRequisitionDetailsFileParms.value.pageSize = val
  QueryOfMaterialRequisitionDetailsFileMethods()
}

const QueryOfMaterialRequisitionDetailsFileTableDate = ref([])

const isLoading1 = ref(true)

const QueryOfMaterialRequisitionDetailsFileMethods = async () => {
  isLoading1.value = true
  try {
    const result = await QueryOfMaterialRequisitionDetailsFile(QueryOfMaterialRequisitionDetailsFileParms.value)
    QueryOfMaterialRequisitionDetailsFileTableDate.value = result.list.map((item: any) => {
      if (item.prnFlag === 'Y') {
        item.prnFlag = true
      }
      return item
    })
    totalL.value = result.total
    isLoading1.value = false
  } catch (error) {
    JMessage.error('领料明细档查询出错')
  }
}

// 指令用量明细查询
const InstructionUsageDetailsTableDate = ref([])

const InstructionUsageDetailsMethods = async () => {
  try {
    isLoading3.value = true
    const result = await InstructionUsageDetails()
    if (result.list.length !== 0) {
      InstructionUsageDetailsTableDate.value = result.list.map((item: any) => {
        item.change = 'Y'
        item.disableConfirm = true
        return item
      })
    } else {
      InstructionUsageDetailsTableDate.value = []
    }

    isLoading3.value = false
  } catch (error) {
    JMessage.error('指令用量明细查询出错')
    isLoading3.value = false
  }
}

// 部门查询
const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

// 用户信息
const userInfo = ref()

onMounted(() => {
  GainDeptNmaeMethids()

  InstructionUsageDetailsMethods()

  QueryOfMaterialRequisitionDetailsFileMethods()

  let userInf = sessionStorage.getItem('userInfo')

  userInfo.value = JSON.parse(userInf!)

  formList1.value[1].selectValue = userInfo.value.deptName

  BatchProcessingOfMaterial.value.deptName = userInfo.value.deptName

  BatchProcessingOfMaterial.value.deptNo = userInfo.value.deptNo
})

const GainDeptNmaeMethids = async () => {
  let NewArray = <any>[]
  const result = await GainDeptNmae()

  NewArray = result.reduce((arr: any, item: any) => {
    if (item.deptNo && item.deptName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.deptNo + ' ' + item.deptName)
    }
    return arr
  }, [])

  formList1.value[1].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

const findData = (a: any) => {
  if (a === '置空') {
    formList1.value.forEach((item: any) => {
      item.inputValue = ''
      item.dateValue = ''
    })
  }
  if (a === '选择材料') {
    dialogVisible1.value = true
    SelectMaterialQueryMethods()
    MaterialManufacturerVnder()
  }
  if (a === '领料批处理') {
    if (InstructionUsageDetailsTableDate.value.length === 0) {
      JMessage.warning('领料批处理的数据不可为空')
    } else if (BatchProcessingOfMaterial.value.deptName === '' || BatchProcessingOfMaterial.value.slipDate === '') {
      JMessage.warning('部门和日期不可为空')
    } else {
      BatchProcessingOfMaterialRequisitionMethods()
    }
  }
  if (a === '打印领料单') {
    if (slipNoList.value.length === 0) {
      JMessage.warning('请勾选需要打印的数据')
    } else {
      printListMethods()
    }
  }
}

// 表格数据
const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo',
    width: '55',
    change: true
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '用量',
    prop: 'ttlUsage',
    width: '55',
    change: true
  },
  {
    label: '库存量',
    prop: 'stkQty',
    change: true
  },
  {
    label: '已领量',
    width: '55',
    prop: 'actQty',
    change: true
  },
  {
    label: '未领量',
    prop: 'notActQty',
    width: '55',
    change: true
  },
  {
    label: '已请领量',
    prop: 'reqQty',
    change: true
  },
  {
    label: '请领量',
    width: '55',
    prop: 'reqQty',
    change: true
  },
  {
    label: '备注',
    width: '50',
    prop: 'remark'
  }
])

const tableHeader1 = ref([
  {
    label: '打印',
    type: 'checkbox',
    prop: 'prnFlag'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '领料单号',
    prop: 'slipNo'
  },
  {
    label: '领料日期',
    prop: 'slipDate'
  },
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '请领量',
    prop: 'reqQty'
  },
  {
    label: '用量',
    prop: 'ttlUsage'
  },
  {
    label: '已领量',
    prop: 'actQty'
  },
  {
    label: '未发量',
    prop: 'notActQty'
  },
  {
    label: '在手量',
    prop: 'stkQty'
  }
])

const tableHeader2 = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '部位',
    prop: 'partName'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '预加量',
    prop: 'ttlUsage'
  },
  {
    label: '在手量',
    prop: 'stkQty'
  },
  {
    label: '已领量',
    prop: 'actQty'
  },
  {
    label: '未领量',
    prop: 'notActQty'
  },
  {
    label: '已请领量',
    prop: 'reqQty'
  },
  {
    label: '未请领量',
    prop: 'noReqQTY',
    backgroundColor: true
  }
])

const tableHeader3 = ref([
  {
    label: '部位',
    prop: 'partName'
  },
  {
    label: '用量',
    prop: 'ttlUsage'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}
</style>
